import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { View, Text, Image, Radio } from '@tarojs/components';
import './Points.less';
import icon from './img/icon.png'

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class Points extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  render() {
    let {
      main: { paymentMethod, points, accountBalanceTotal, deliveryFee, userAgreement },
      actions: { action },
    } = this.props;
    return (
      <>
        <View className="componentPay">
          <>
            <View className='jc-sb row'>
              <View className='row ai-c' onClick={() => action.commonChange('main.showPointsRule', true)}>
                <Text className='p28'>积分抵扣({points?.totalPoint}积分)</Text>
                <Image className="icon" src={icon} mode="widthFix" />
              </View>
              <View className='row ai-c'>
                {/* <Text className='point-deduction-price'>-¥ {points?.deductionAmountOfPoints?.toFixed(2)}</Text> */}
                <Text className='p28'>满{points?.pointConfig?.overPointsAvailable}积分可用</Text>
                {
                  points?.integralDeductionSwitch &&
                  <Radio
                    color="#1784FC"
                    style={{ textAlign: 'center', marginLeft: 6, marginRight: -8, transform: 'scale(.8)' }}
                    checked={points?.integralDeductionSwitch}
                  />
                }

              </View>
            </View>
          </>
        </View>

        <View className='row ai-c' style={{ marginTop: 8, marginLeft: 4, marginBottom: '30vh' }}>
          <Radio
            color="#1784FC"
            style={{ textAlign: 'center', marginLeft: 6, marginRight: 1, transform: 'scale(.8)' }}
            checked={userAgreement}
            onClick={() => { action.commonChange('main.userAgreement', !userAgreement) }}
          />
          <Text style={{ fontSize: 14, color: '#999999' }}>已阅读并同意</Text>
          <Text style={{ fontSize: 14, color: '#218CFF' }} onClick={() => action.commonChange('main.showUserAgreement', true)}>《代取服务用户协议》</Text>
        </View>
      </>
    );
  }
}
